import React, {useEffect} from 'react';
type IReactComponent =
  | React.ClassicComponentClass
  | React.ComponentClass
  | React.FunctionComponent
  | React.ForwardRefExoticComponent<any>;

import {TouchableOpacity, Image, StyleSheet} from 'react-native';

import icon_add from '../../assets/images/icon_add.png';

export default <T extends IReactComponent>(OriginView: T, type: string): T => {
  const HOCView = (props: any) => {
    useEffect(() => {
      reportDeviceInfo();
    }, []);

    // 案例二：例如每个页面需要上报一些设备信息给服务端，我们不需要在每个页面都写一段上报代码，用高阶组件写完，然后包装原有组件并返回新的组件即可
    const reportDeviceInfo = () => {
      // 模拟上报
      const deviceInfo = {
        deviceId: 1,
        deviceName: '',
        modal: '',
        storage: 0,
        ip: ''
      };
      console.log(deviceInfo);

      // reportDeviceInfo(deviceInfo);  // 调用网络api
    };

    // 案例一：假如每个页面需要一个+btn按钮，不要要重复写，用高阶组件包裹即可
    return (
      <>
        <OriginView {...props} />
        <TouchableOpacity
          style={styles.addButton}
          onPress={() => {
            console.log('onPress ...');
          }}>
          <Image style={styles.addImg} source={icon_add} />
        </TouchableOpacity>
      </>
    );
  };

  return HOCView as T;
};

const styles = StyleSheet.create({
  addButton: {
    position: 'absolute',
    bottom: Math.floor(Math.random() * 300),
    right: 28,
    zIndex: 99
  },
  addImg: {
    width: 54,
    height: 54,
    resizeMode: 'contain'
  },
});
